﻿import * as React from "react";
import * as electron  from 'electron'
import Obj = require('object-assign')
import 颜色 from '../../工具代码/颜色'
import R控件基类 from '../../核心代码/R控件基类'
import * as 基类 from '../../核心代码/控件基类'
import R菜单 from '../交互组件/菜单'
import * as 菜单 from '../交互组件/菜单'

const ipcR = electron.ipcRenderer
const ipcM = electron.remote.ipcMain

export default class R头像 extends R控件基类{
    constructor(props) {
        super(props)
        this.基础数据 = this.props as 头像
        this.标准样式 = this.基础数据.自定义样式 ? this.基础数据.自定义样式 : Obj({}, this.标准样式,
            {
                WebkitAppRegion: 'no-drag', zIndex: 10010
            })
        this.经过样式 = Obj({}, this.经过样式, {
            boxShadow: new 基类.阴影(0,0,5,2,颜色.rgb(255,255,255)).取值
        })
        this.点击样式 = Obj({}, this.经过样式, {
            boxShadow: new 基类.阴影(0, 0, 10, 2, 颜色.rgb(255, 255, 255)).取值
        })
        this.state = {
            使用样式:this.标准样式,
            切换: 基类.隐藏,
            是否显示: true,
            是否启用: this.基础数据.是否启用 ? null : this.基础数据.是否启用
        }
    }
    基础数据: 头像 = {}
    private 主窗口失去焦点 = ipcR.on('主窗口_失去焦点', () => {
        if (!this.state.是否显示) {
            this.setState({ 切换: 基类.隐藏, 是否显示: true })
        }
    })  
    private 隐藏菜单() {
        if (this.state.是否显示) {
            this.setState({ 切换: 基类.显示, 是否显示: false })
        } else {
            this.setState({ 切换: 基类.隐藏, 是否显示: true })
        }
    }
    private 事件处理 = Obj({}, this.基本事件, {
        onClick: (e) => {
            e.stopPropagation()
            this.基础数据.头像被点击 ? this.基础数据.头像被点击(e) : {}
            this.隐藏菜单()
        }
    })
    render() {
        if (this.state.是否启用 == null || this.state.是否启用 == true) {
            return (
                <div id={ this.基础数据.id}>
                    <img src={ this.基础数据.src}
                        draggable="false"
                        style={this.state.使用样式}
                        {...this.事件处理}
                        />
                    <div style={this.state.切换}>
                        <R菜单
                            隐藏菜单={() => {
                                this.隐藏菜单()
                            } }
                            菜单数据={ this.基础数据.菜单数据}/>
                    </div>
                </div>
            )
        } else {
            return (
                <div id={ this.基础数据.id}>
                    <img src={ this.基础数据.src}
                        draggable="false"
                        style={this.禁用样式}
                        />
                </div>
            )
        }
    }
}

export interface 头像 extends 基类.控件基类 {
    id?: string,
    src?: string,
    头像被点击?: (e) => any,
    菜单数据?: 菜单.菜单数据,
}
